import React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'

import Menu from '../common/Menu'
import Footer from '../common/Footer'

import LayoutComponent from '../LayoutComponent'

import {changePrice} from '../../actions/priceaction';
import {getConfig, saveData, changeExportStatus} from '../../actions/banneraction';


class Price extends LayoutComponent {
	constructor(props){
		super(props)
	}

	componentDidMount() {
	  	this.props.init();
	}

	render() {

		const {originalPrice, discountPrice} = this.props

		return (

			<div style={{background: '#222d32'}}>

				<Menu parent="gw" active="/price"/>

				<div className="content-wrapper" style={{minHeight: '900px'}}>

					<section className="content-header">

						<h1>
							更改下载宝价格
						</h1>

						<ol className="breadcrumb">

							<li>
								<Link to="/">
									<i className="fa fa-dashboard">
									</i> Home
								</Link>
							</li>

							<li className="active">Price</li>

						</ol>

					</section>

					<section className="content">
						<span style={{width: '60px', display: 'inline-block', textAlign: 'right'}}>原价：</span><input type="text" placeholder="请输入下载宝原价" ref="original_price" value={originalPrice} onChange={this.changeOriginalPrice.bind(this)} /> 元<br /><br />
						<span style={{width: '60px', display: 'inline-block', textAlign: 'right'}}>优惠价：</span><input type="text" placeholder="请输入下载宝优惠价" ref="discount_price" value={discountPrice} onChange={this.changeDiscountPrice.bind(this)} /> 元<br /><br />
						<span style={{width: '60px', display: 'inline-block', textAlign: 'right'}}>&nbsp;</span><button onClick={this.saveModified.bind(this)}>保存所有变更</button><br />
					</section>

				</div>

				<Footer/>

			</div>
		)
	}

	saveModified () {
		const { addStatus, history, currentIndex, originalPrice, discountPrice, saveModified } = this.props

		if(addStatus){
			alert('请先保存新增数据，或取消新增数据');
		}else{
			if(!/^[1-9][0-9]*$/.test(originalPrice)){
				alert('请输入正确的原价');
				return;
			}
			if(!/^[1-9][0-9]*$/.test(discountPrice)){
				alert('请输入正确的优惠价');
				return;
			}
			if(parseInt(originalPrice) < parseInt(discountPrice)){
				alert('原价不能低于优惠价');
				return;
			}

			var saveObj = {
				history : history,
				currentIndex : currentIndex,
				originalPrice : originalPrice,
				discountPrice : discountPrice
			}
			saveModified(saveObj, function(){
				alert('数据保存成功');
			});
		}
	}

	changeOriginalPrice (event)  {
		const { discountPrice, savePrice } = this.props;
		savePrice(event.target.value, discountPrice);
	}

	changeDiscountPrice (event) {
		const { originalPrice, savePrice } = this.props
		savePrice(originalPrice, event.target.value);
	}

}

//使用connect创建component，把dispatch和state传进ui component
export default connect(
	(state)=>({
		history : state.bannerReducer.history,
		currentIndex : state.bannerReducer.currentIndex,
		addStatus : state.bannerReducer.addStatus,
		originalPrice : state.priceReducer.originalPrice,
		discountPrice : state.priceReducer.discountPrice
	}),
	(dispatch)=>({

		init:() => {
			dispatch(getConfig());
		},

		savePrice : (originalPrice, discountPrice) => {
        	dispatch(changePrice(originalPrice, discountPrice));
        	dispatch(changeExportStatus(false));
        },

        saveModified : (data, cb) => {
        	dispatch(saveData(data, cb));
        }
		
	})
)(Price)
